<template>
  <div class="flex gap-4">
    <div
      v-for="item in weeks"
      :key="item.value"
      class="week flex justify-center items-center"
      :class="{ active: selectedKeys.includes(item.value) }"
      @click="selectItem(item.value)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script setup lang="ts">
const modelValue = defineModel<string[]>('modelValue');
const selectedKeys = ref<string[]>([]);

const emit = defineEmits(['change']);

const selectItem = (week: string) => {
  if (selectedKeys.value.includes(week)) {
    selectedKeys.value = selectedKeys.value.filter(item => item !== week);
    return;
  }
  selectedKeys.value.push(week);
  emit('change', selectedKeys.value);
};
onMounted(() => {
  if (modelValue.value) selectedKeys.value = modelValue.value;
});
const weeks = [
  {
    label: '一',
    value: '2',
  },
  {
    label: '二',
    value: '3',
  },
  {
    label: '三',
    value: '4',
  },
  {
    label: '四',
    value: '5',
  },
  {
    label: '五',
    value: '6',
  },
  {
    label: '六',
    value: '7',
  },
  {
    label: '日',
    value: '1',
  },
];
</script>

<style lang="scss" scoped>
.week {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  cursor: pointer;
  &:hover {
    background-color: var(--hover-background);
  }
}
.active {
  background-color: var(--primary) !important;
  color: white;
}
</style>
